<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
        .container {
            width: fit-content;
            margin: 50px auto;
        }
        #cs {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="cs" width="400px" height="400px" ></canvas>
        <!-- <hr> -->
        <!-- <button onclick="doRotate()" >doRotate</button> -->
        <!-- <button onclick="doStartRotate()" >start rotate</button> -->
    </div>
    <script>
        var canvas = document.getElementById("cs");
        var ctx = canvas.getContext("2d");


        function drawFiveStar(ctx, x, y, r, offsetDeg) {
            ctx.clearRect(0,0, 400, 400);
            let deg = 360/10;
            let r1 = r/2;
            ctx.fillStyle = '#DD0000';
            ctx.beginPath();
            for(let i=0; i< 10;i++) {
                let r0 = r;
                if (i%2 == 1) {
                    r0 = r1;
                }
                let px = x + r0 * Math.cos( (i * deg + offsetDeg) * Math.PI/180);
                let py = y + r0 * Math.sin( (i * deg + offsetDeg) * Math.PI/180);
                ctx.lineTo(px, py);
            }
            ctx.closePath();
            ctx.fill();
        }

        // drawFiveStar(ctx, 200, 200, 100, 30);

        let deg = 0;
        function doRotate() {
            drawFiveStar(ctx, 200, 200, 100, deg);
            deg+=2;
            if (deg >= 360) {
                deg = 0;
            }
            // console.log(deg);
            requestAnimationFrame(doRotate);
        }

        // function doStartRotate() {
        //     //setInterval(doRotate, 100);
        //     doRotate();
        // }

        doRotate();

    </script>
</body>
</html>